<template>
<div>
  祖组件来了
</div>
</template>

<script>
//2022.09.10    00:08
//https://www.bilibili.com/video/BV1Zy4y1K7SH?p=162&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

/* 
CompositionAPI与OptionsAPI的区别
CompositionAPI中数据的方法写的比较集中,方便维护
能更加优雅地去书写代码

Fragment
在Vue2中:组件必须有一个根标签
在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。好处:减少标签层级,减小内存占用

*/


import { reactive,ref,readonly,isReactive,isReadonly,isRef } from "vue";
export default {
  name: "App",
  setup() {
    let car=reactive({name:'奔驰',price:'38w'})
    let sum=ref(0);
    let sum2=readonly(car)
    console.log('isRef(sum)',isRef(sum));
    console.log('isReadonly(car)',isReadonly(car));
    console.log('isReactive(car)',isReactive(car));
    return {
      car,
      sum,
      sum2
    };
  },
};
</script>

<style scoped>
</style>
